<!-- 电费单创建 -->
<template>
	<div>
		<div class="powerRate-container">
			<el-form :model="form" label-width="auto" :inline="true">
				<el-form-item :label="$t('message.powerRate.pageSubstationChange')">
					<el-select
						v-model="form.substation"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in substationOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.powerOrderCreate.pageDeviceChange')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.powerOrderCreate.pagePointList')">
					<el-select
						v-model="form.measurementPoint"
						:placeholder="$t('message.form.pageSelectHolder')"
						style="width: 200px"
						class="custom-select"
						size="default"
					>
						<el-option v-for="item in measurementOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item :label="$t('message.powerRate.pageDateChange')">
					<el-date-picker
						size="default"
						type="month"
						v-model="form.date"
						:placeholder="$t('message.form.pageSelectHolder')"
						class="custom-date-picker"
					/>
				</el-form-item>

				<el-form-item>
					<el-button size="default" type="primary" @click="handleSearch">{{ $t('message.form.pageQuery') }}</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="settlement-sheet">
			<table>
				<thead>
					<tr>
						<th colspan="13" style="color: red">{{ $t('message.powerOrderCreate.pagePVTieList') }} - 2025-05-23 00:00:00</th>
					</tr>
					<tr>
						<td rowspan="3">{{ $t('message.powerOrderCreate.pagePVElectricityFee') }}</td>
						<td colspan="3">{{ $t('message.powerOrderCreate.pageTop') }}</td>
						<td colspan="3">{{ $t('message.powerOrderCreate.pagePeak') }}</td>
						<td colspan="3">{{ $t('message.powerOrderCreate.pageFlat') }}</td>
						<td colspan="3">{{ $t('message.powerOrderCreate.pageValley') }}</td>
					</tr>
					<tr>
						<td>{{ $t('message.powerOrderCreate.pageTopPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransactionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransmissionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pagePeakPricing') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransactionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransmissionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageFlatPricing') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransactionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransmissionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageValleyPricing') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransactionPrice') }}</td>
						<td>{{ $t('message.powerOrderCreate.pageTransmissionPrice') }}</td>
					</tr>
					<tr>
						<td style="background-color: #ffff73">0</td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td style="background-color: #ffff73">0</td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td style="background-color: #ffff73">0</td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td style="background-color: #ffff73">0</td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
						<td><input style="width: 3rem" type="text" v-model="formData.endTime" /></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>{{ $t('message.powerOrderCreate.pageAdditionalFees') }}</td>
						<td style="background-color: #ffff73">0</td>
						<td>{{ $t('message.powerOrderCreate.pageWaterResources') }}</td>
						<td colspan="2"><input style="width: 6rem" type="text" v-model="formData.endTime" /></td>
						<td>{{ $t('message.powerOrderCreate.pageRelocation') }}</td>
						<td colspan="2"><input style="width: 6rem" type="text" v-model="formData.endTime" /></td>
						<td>{{ $t('message.powerOrderCreate.pageEnergy') }}</td>
						<td colspan="2"><input style="width: 6rem" type="text" v-model="formData.endTime" /></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td rowspan="7" style="background-color: #53aae0">{{ $t('message.powerOrderCreate.pageTotal') }}:</td>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageProject') }}</td>
						<td style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageTotal') }}</td>
						<td style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageTop') }}</td>
						<td style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pagePeak') }}</td>
						<td style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageFlat') }}</td>
						<td style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageValley') }}</td>
						<td style="background-color: #f7cea0"></td>
						<td style="background-color: #f7cea0"></td>
						<td style="background-color: #f7cea0"></td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageReverseElectricity') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="4" style="background-color: #5cc9fa">{{ $t('message.powerOrderCreate.pageSelfConsumed') }}</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pagePVGeneration') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="4" style="background-color: #5cc9fa">
							{{ $t('message.powerOrderCreate.pageSelfConsumption') }}
						</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageSurplusPower') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="4" style="background-color: #5cc9fa">
							{{ $t('message.powerOrderCreate.pageSurplusSettled') }}
						</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageTotalPV') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="4" style="background-color: #5cc9fa">
							{{ $t('message.powerOrderCreate.pageTotalBilled') }}
						</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageSettlement') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="8" style="background-color: #5cc9fa">
							{{ $t('message.powerOrderCreate.pageBilling') }}
						</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageConsumption') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td style="background-color: #a4cb3f">0.00</td>
						<td colspan="8" style="background-color: #5cc9fa">{{ $t('message.powerOrderCreate.pageBilled') }}</td>
					</tr>
					<tr>
						<td rowspan="7" style="background-color: #53aae0">{{ $t('message.powerOrderCreate.pageInformation') }}</td>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageFactory') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">{{ $t('message.powerOrderCreate.pageElectricity') }}</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageAverageSettlement') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">{{ $t('message.powerOrderCreate.pageAverage') }}</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageAmount') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">
							{{ $t('message.powerOrderCreate.pageCost') }}
						</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageGridConnected') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">{{ $t('message.powerOrderCreate.pageSold') }}</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageGrid') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">{{ $t('message.powerOrderCreate.pageStateGrid') }}</td>
					</tr>
					<tr>
						<td colspan="4" style="background-color: #f7cea0">{{ $t('message.powerOrderCreate.pageAmountStat') }}:</td>
						<td style="background-color: #ffff54">0.00</td>
						<td colspan="8" style="background-color: #ccccfb">{{ $t('message.powerOrderCreate.pageCostOwed') }}</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="7">
							{{ $t('message.powerOrderCreate.pageSealStatus') }}
							{{ $t('message.powerOrderCreate.pageYes') }}&nbsp;<input type="radio" name="seal" value="yes" />&nbsp;
							{{ $t('message.powerOrderCreate.pageNo') }}&nbsp;<input type="radio" name="seal" value="no" />
						</td>

						<td colspan="6">
							{{ $t('message.powerOrderCreate.pageBillStatus') }}
							{{ $t('message.powerOrderCreate.pageMeterRead') }}&nbsp;<input type="radio" name="billStatus" value="read" />&nbsp;
							{{ $t('message.powerOrderCreate.pageElectricityPrice') }}&nbsp;<input type="radio" name="billStatus" value="price" />
						</td>
					</tr>
					<tr>
						<th colspan="13">
							{{ $t('message.powerOrderCreate.pageSignature') }}<input type="text" :placeholder="$t('message.powerOrderCreate.pageUserSignature')" />
						</th>
					</tr>
				</tfoot>
			</table>
		</div>

		<div style="height: 10rem"></div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
	name: 'PhotovoltaicSettlementSheet',

	setup() {
		const state = reactive({
			form: {
				substation: '',
				measurementPoint: '',
				date: '',
			},
			substationOptions: [
				{ value: '1', label: '测点1' },
				{ value: '2', label: '测点2' },
			],
			measurementOptions: [
				{ value: '1', label: '测点1' },
				{ value: '2', label: '测点2' },
			],
			formData: {
				taskName: '',
				endTime: '',
				orderStatus: '上报中',
				creator: 'HKCW',
				creationTime: '2025-05-23 15:48:00',
				deviceType: '',
				powerStation: '',
				equipment: '',
				owner: '',
				problemDescription: '',
				processingSteps: '',
				approvalOpinion: '',
			},
		});

		const handleSearch = () => {
			console.log('form', state.form);
		};

		return {
			handleSearch,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss">
.powerRate-container {
	height: 13%;
	padding: 1rem;
	background: url('../../assets/bgImage.png') center center / 100% 100% no-repeat;
	.el-form-item__label {
		color: #fff;
	}
}

.settlement-sheet {
	max-width: 85%;
	margin: 0 auto;
	margin-top: 0.9rem;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

th {
	background-color: #f2f2f2;
}

thead th {
	vertical-align: middle;
}

tfoot td {
	padding-top: 20px;
}
</style>
